Zoë van Sittert's profileEmma Jerrard's profile

Design for development | Social Innovation: Fiddle

04 | Design for development | Social Innovation: Fiddle |
IOW 400.7
Project brief
A digital, game-based intervention was to be designed for this project that shows the powerful act of playing as a means to encourage meaningful connection. Students were divided into groups of 3 with a specific prompt assigned to each group. This digital intervention was designed for children between the ages of 6 and 8 and was aimed at
encouraging connection among family, friends and/or the community. Students were required to conduct research on their target audience and make use of prototyping to find out the likes and dislikes of the children in order to make accurate decisions for their digital intervention. This project aimed at creating positive change in a local context specifically with regard to civic responsibility and children’s development through play and experiential learning.
Project deliverables
i. Process documentation:

A. Initial research on topic
B. Visual identity development
C. Game development and prototyping
D. Rationale

ii. Tangible information design solution (digital intervention)
iii. Presentation
Rationale
Our prompt was music, drama and dance. We decided to create an app based on musical interaction on various levels. The app includes mastery, sensory and freeplay components. Fiddle aims to spark creativity by creating instruments and sounds as well as encouraging children to interact with the environment around them to make these instruments. The app also allows children to explore and create their rhythms and songs together, bringing in a social aspect. Playtesting with children proved to be insightful and challenged our presumptions. Through prototyping, we were made aware of areas where the UX was not clear and needed further refinement to make it easier for the child user to follow. The children’s interaction with characters also allowed us to test whether the colour grouping for the instruments to show their relationship with one another was successful. When interacting with the ‘timpani drum screen, the children immediately gravitated towards popping the bubbles which gave us the idea to create words once the bubbles were popped. Describing the various sounds of the instruments. 

The mastery play is based on progressive levels that require various interactions and imagination to complete. Children are encouraged to emulate certain musical sounds by finding objects in their environment. Characters that are personified musical instruments guide the child through the play, making sure that they aren’t left confused or unsure of what to do. The app remains challenging and motivating by locking certain characters so that children feel accomplished when they unlock a new character and progress further. The Freeplay component of the app allows the children to use their sounds as well as the characters' sounds to mix and create their songs. This section of the app has limited constraints and lets children push the limits of exploration and imagination.
Initial research 
The above image represents a summary of the research done on the importance of role play within a
child's development.
The above image represents the moodboard collage that encapsulates our given prompt (music, drama, dance) and first three concepts for our app based off of the initial research on the topic.
Visual identity development 
By looking at existing child-play apps and other found imagery, we've established a visual inspiration moodboard.
Characters |
Characters that are personified musical instruments guide the child through the play, making sure that they aren’t left confused or unsure of what to do. The app remains challenging and motivating by locking certain characters so that children feel accomplished when they unlock a new character and progress further.
Logotype |
Colour palette |
The app’s warm with a touch of blue colour palette is inspired by this painting of a harp man created by one of the kids we were user testing on (first play testing). This painting was created during our first prototype testing. Additionally, each music group is represented by a different colour.
Typography |
The typography used within Fiddle, is a rounded serif font (Decoy) paired with a legible and user friendly san-serif font (Poppins).
Mobile screen and grid system |
Fiddle's interface makes use of a four column grid system (71 px width) with 18 px Margins and 18 px Gutters  
Buttons |
Game development and prototyping ​​​​​​​
Before starting with the play sessions, we started to develop low-fidelity wireframes for our app prototype (mastery journey and freeplay journey). Trying to keep the layout and user flow simple and easily accessible for children.
After designing the blueprint for the app's user interface structure with the low-fidelity wireframes, by adding some colour and illustrations to create medium-fidelity wireframes that are going to be used during our initial prototype testing with the kids.
Children playing and experimenting with music app- garage band. Although hesitant at first, they eventually became more confident and figured out the different instruments and even working together when playing with the electronic organ option. 

Children were asked to draw an instrument and personify it by giving it human characteristics.
Children playing and experimenting with found objects to make musical instruments. Unsure of what to do at first, they quickly warmed up when given ideas of the different sounds they could make by combining two or more objects.

We also played real instruments alongside the children who joined in with their self-generated ones. After a brief introduction to musical timing, we created our own unique songs.
Children tested the prototype on a digital app with its initial Ui. Insights into how children interact with a digital platform were crucial in further refining the Ui. The Ux flow worked well with the children understanding all parts of the journey.
The children were also offered a chance to engage with the characters and were given an opportunity to create their own.
Final wireframes 
Design for development | Social Innovation: Fiddle
Published:

Design for development | Social Innovation: Fiddle

Published: